<template>
  <div class="pipelineInfoGroup" v-if="cardData.length">
    <div class="pipeline-card" v-for="item in cardData" :key="item.pipelineName">
      <div class="top-info">
        <div class="left-button">
          <button class="button-first">主版</button>
          <button class="button-second">灰度</button>
        </div>
        <div class="right-button">
          <button class="button-third">测试</button>
        </div>
      </div>
      <div class="middle-info">
        <div>
          {{item.pipelineName}}
        </div>
        <div>
          <div v-if="item.successCount === 0" class="gray-circle"></div>
          <div v-else class="green-circle"></div>
          <span>{{item.successCount}} / {{item.totalCount}}</span>
        </div>
      </div>
      <div class="bottom-info">
        <div>
          <div class="bottom-title">最近运行时间</div>
          <div v-if="item.recentTime">{{item.recentTime}}</div>
          <div v-else>------</div>
        </div>
        <div>
          <div class="bottom-title">最近触发者</div>
          <div v-if="item.trigger">{{item.trigger}}</div>
          <div v-else>------</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PipelineInfo",
    data() {
      return {
        cardData: []
      }
    },

    methods: {
      getData() {
        this.$api.getDashboardPipelineList({}).then(({data}) => {
          this.cardData = data.data.recentPipelineVOList
        })
      }

    },

    mounted() {
      this.getData()
    }
  }
</script>

<style lang="less" scoped>
  button {
    width: 42px;
    height: 25px;
    font-size: 12px;
    border-radius: 5px;
  }
  .pipelineInfoGroup {
    white-space: nowrap;
    display: flex;
    overflow: scroll;
    overflow-x: hidden;
    height: 165px;
    .pipeline-card {
      width: 280px;
      height: 150px;
      min-width: 250px;
      min-height: 135px;
      border-radius: 10px;
      background-color: #5794d2;
      padding: 5px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 2px 2px 5px gray;
      .top-info {
        display: flex;
        justify-content: space-between;
        .button-first {
          border: 0;
          background-color: #dbd343;
          color: #fff;
          box-shadow:2px 2px 4px lightslategray;
        }
        .button-second {
          border: 1px solid #fff;
          background-color: rgba(87, 148, 210, 0);
          color: #fff;
          margin-left: 4px;
        }
        .button-third {
          border: 0;
          background-color: #fff;
          color: #5794d2;
          box-shadow:2px 2px 4px lightslategray;
        }
      }
      .middle-info {
        display: flex;
        justify-content: space-between;
        color: #fff;
        .gray-circle {
          background-color: #b3c2a9;
          width: 10px;
          height: 10px;
          border-radius: 10px;
          display: inline-block;
          margin-right: 4px;
        }
        .green-circle {
          background-color: #58C612;
          width: 10px;
          height: 10px;
          border-radius: 10px;
          display: inline-block;
          margin-right: 4px;
        }
      }
      .bottom-info {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #fff;
        .bottom-title {
          color: #e3cd5b;
        }
      }
    }
  }
  .pipelineInfoGroup:hover {
    overflow-x: auto;
  }

</style>
